<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Taco Cloud</title>
    <link rel="stylesheet" th:href="@{/styles.css}"/>
</head>

<body>
<h1>Design your tacos</h1>
<img th:src="@{/image/TacoCloud.png}"/>

<form method="post" th:object="${design}">
    <div class="grid"></div>
    <div class="ingredient-group" id="wraps">
        <h3>Designate your wrap:</h3>
        <div th:each="ingredient : ${wrap}">
            <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
            <span th:text="${ingredient.name}">INGREDIENT</span>
        </div>
    </div>

    <div class="ingredient-group" id="proteins">
        <h3>Designate your protein:</h3>
        <div th:each="ingredient : ${protein}">
            <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
            <span th:text="${ingredient.name}">INGREDIENT</span>
        </div>
    </div>

    <div class="ingredient-group" id="cheeses">
        <h3>Designate your cheese:</h3>
        <div th:each="ingredient : ${cheese}">
            <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
            <span th:text="${ingredient.name}">INGREDIENT</span>
        </div>
    </div>

    <div class="ingredient-group" id="veggies">
        <h3>Designate your veggies:</h3>
        <div th:each="ingredient : ${veggies}">
            <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
            <span th:text="${ingredient.name}">INGREDIENT</span>
        </div>
    </div>

    <div class="ingredient-group" id="sauces">
        <h3>Designate your sauce:</h3>
        <div th:each="ingredient : ${sauce}">
            <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
            <span th:text="${ingredient.name}">INGREDIENT</span>
        </div>
    </div>
    </div>

    <div>
        <h3>Name your tacos creation:</h3>
        <input type="text" th:field="*{name}"/>
        <button>Submit your tacos</button>
    </div>
</form>
</body>
</html>